<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div>个人设置</div>
      </div>
    </template>
    <el-tabs :tab-position="tabPosition" style="height: 300px" class="demo-tabs">
      <el-tab-pane label="基本设置">
        <div class="set-title">
          <span>基本设置</span>
        </div>
        <div class="set-info">
          <div>
            <el-form ref="settingFormRef" :model="settingForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="邮箱" prop="email" class="item">
                <el-input v-model="settingForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="realname" class="item">
                <el-input v-model="settingForm.realname" placeholder="请输入验证码" maxlength="10"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" class="item">
                <el-input v-model="settingForm.phone" placeholder="请输入11位大陆手机号码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="updateUserMes" type="primary">更新基本信息</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <span class="laberAvater">头像</span>
            <img :src="avater" class="avatar">
            <el-upload ref="upload" class="upload-demo" :headers="headers"
              :action="`http://120.77.156.205:8808/web/user/uploadAvater/${id}`" name="pic" :show-file-list="false"
              :on-success="successUpdateAvater">
              <el-button size="small" type="success">更换头像</el-button>
            </el-upload>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全设置">
        <div class="set-title">
          <span>安全设置</span>
        </div>
        <div class="form-info">
          <el-form :model="settingPassword" label-width="100px" class="modifyFrom">
            <div class="modifyTitle">修改密码</div>
            <el-row :gutter="11">
              <el-col :span="18">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="settingPassword.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-button type="info" plain class="test" @click="getCode">获取验证码</el-button>
              </el-col>

            </el-row>

            <el-form-item label="验证码" prop="code" class="item">
              <el-input v-model="settingPassword.code" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password" class="item">
              <el-input v-model="settingPassword.password" placeholder="请输入您的新密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="updateUserPassword" type="primary" class="modifyBtn">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { apiUpdateUserMes, apiSendCode, apiJudgeCode, apiUploadDetailFishPic } from '@/apis/personal'
import { useStore } from '@/store/index';
import { ElMessage } from 'element-plus'


const store = useStore()
const tabPosition = ref('left')
const id = ref(sessionStorage.getItem('id'))
const avater = computed(() => store.state.avater || sessionStorage.getItem('avater') as string)
const token = sessionStorage.getItem('token')
const settingForm = reactive({ email: '', realname: '', phone: '', id })
const headers = reactive({ token })
const settingPassword = reactive({ email: '', code: '', password: '' })

const updateUserMes = async () => {
  console.log(settingForm)
  let { data: res } = await apiUpdateUserMes(settingForm)
  if (res.code == 0) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error('修改失败')
  }
  console.log(res)
}
const reset = async () => {
  settingForm.email = ''
  settingForm.realname = ''
  settingForm.phone = ''
}

const successUpdateAvater = (res: any) => {
  store.commit('setAvater', res.data.picUrl)
  sessionStorage.setItem('avater', store.getters['getAvater'])
}

const getCode = () => {
  apiSendCode(settingPassword.email)
}
const updateUserPassword = async () => {
  let res = await apiJudgeCode(settingPassword.code, settingPassword.password);
  console.log(res)
}
</script>
<style scoped lang="scss">
.card-header {
  height: 15px;
}

.box-card {
  height: 400px;
  margin: 35px 100px;
}

.set-info {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.avatar {
  position: absolute;
  top: 20px;
  width: 180px;
  height: 180px;
  border-radius: 90px;
}

.upload-demo {
  margin-top: 190px;
  margin-left: 190px;
}

.item {
  margin-bottom: 25px;
}

.laberAvater {
  position: absolute;
  top: 5px;
}

.form-info {
  width: 450px;
  margin-top: 20px;
  margin-left: 350px;
}

.modifyFrom {
  display: flex;
  flex-direction: column;

  .modifyTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }

  .modifyBtn {
    width: 150px;
    margin-left: 55px;
  }
}

.test {
  margin-right: 10px;
}
</style>